<template>
  <xh-container
    :title="formData.roleId ? '编辑' : '新增'"
    btnText="保存"
    @onSave="handleClickSubmit"
  >
    <view class="form-wrapper">
      <uni-forms
        :rules="rules"
        ref="form"
        :modelValue="formData"
        :label-width="80"
        label-align="right"
      >
        <uni-forms-item label="角色名称" name="roleName">
          <uni-easyinput
            v-model="formData.roleName"
            placeholder="请输入角色名称"
          />
        </uni-forms-item>
        <uni-forms-item label="权限字符" name="roleKey">
          <uni-easyinput
            v-model="formData.roleKey"
            placeholder="请输入权限字符"
          />
        </uni-forms-item>
        <uni-forms-item label="角色顺序" name="roleSort">
          <uni-easyinput
            v-model="formData.roleSort"
            placeholder="请输入角色顺序"
          />
        </uni-forms-item>
        <uni-forms-item label="状态" name="status">
          <view class="center-wrapper">
            <uni-data-checkbox
              v-model="formData.status"
              :localdata="statusOptions"
            ></uni-data-checkbox>
          </view>
        </uni-forms-item>
        <uni-forms-item required label="菜单" name="menuIds">
          <xh-multiple-select
            v-model="formData.menuIds"
            placeholder="请选择菜单"
            :localdata="menuList"
          />
        </uni-forms-item>
        <uni-forms-item label="备注" name="remark">
          <uni-easyinput v-model="formData.remark" placeholder="请输入备注" />
        </uni-forms-item>
      </uni-forms>
    </view>
  </xh-container>
</template>
<script>
import { addRole, editRole, getAllMenuTreeSelect } from "@/api/system/user.js";
import { formatSelectList } from "@/utils/business.js";
import { decodeParams } from "@/utils/common.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      formData: { status: "0" },
      menuList: [],
      rules: {
        roleName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入角色名称",
            },
          ],
        },
        roleKey: {
          rules: [
            {
              required: true,
              errorMessage: "请输入权限字符",
            },
          ],
        },
        roleSort: {
          rules: [
            {
              required: true,
              errorMessage: "请输入角色顺序",
            },
          ],
        },
      },
    };
  },
  onLoad(options) {
    const params = decodeParams(options);
    if (params.roleId) {
      this.formData = params;
    }
  },
  computed: {
    ...mapGetters(["statusOptions"]),
  },
  created() {
    this.fetchMenuList();
  },
  methods: {
    fetchMenuList() {
      getAllMenuTreeSelect().then((res) => {
        this.menuList = formatSelectList(res.menus || [], {
          text: "label",
          value: "id",
        });
      });
    },
    // 保存
    handleClickSubmit() {
      const defaultParams = {
        deptCheckStrictly: true,
        menuCheckStrictly: true,
        deptIds: [],
        menuIds: [],
      };
      const handleSuccess = () => {
        this.$modal.msgSuccess("保存成功！");
        this.clearData();
        this.$nav.navigateBack();
      };
      this.$refs.form.validate().then((values) => {
        if (this.formData.roleId) {
          editRole({
            ...defaultParams,
            ...this.formData,
          }).then(() => {
            handleSuccess();
          });
        } else {
          addRole({
            ...defaultParams,
            ...values,
          }).then(() => {
            handleSuccess();
          });
        }
      });
    },
    clearData() {
      this.formData = {};
      this.$refs.form.clearValidate();
    },
  },
};
</script>

<style scoped lang="scss">
.form-wrapper {
  padding: 10px;
  .center-wrapper {
    display: flex;
    height: 36px;
    align-items: center;
  }
}
</style>
